<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定义组件的两种方式</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<hello></hello>
		<my-world></my-world>
	</div>

	<script>
		/**
		 * 方式1：先创建组件构造器，然后由组件构造器创建组件
		 */
		//1.使用Vue.extend()创建一个组件构造器
		var MyComponent=Vue.extend({
			template:'<h3>Hello World</h3>'
		});
		//2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
		Vue.component('hello',MyComponent);
		
		/**
		 * 方式2：直接创建组件(推荐)
		 */
		// Vue.component('world',{
		Vue.component('my-world',{
			template:'<h1>你好，世界</h1>'
		});

		var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
			el:'#itany',
			data:{
				msg:'网博'
			}
		});	
	</script>
</body>
</html>